<template>
  <el-container class="h-100" v-loading="model.loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100" style="line-height: 80px;">
        <!-- <el-button icon="el-icon-back" circle size="small" class="mr-3" @click="$router.go(-1)" v-show="$route.name !== 'province'"></el-button> -->
        <h5 class="d-inline">省级作业单位</h5>
        <div class="float-right">
          <el-button type="primary" size="small" @click="dialogVisible=true">添加作业单位</el-button>
          <el-button type="primary" size="small" @click="$router.push({name: 'workcity'})">地市作业单位</el-button>
          <el-button type="primary" size="small" @click="$router.push({name: 'workcountry'})">区县作业单位</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="p-2 m-2 bg-white">
      
      <el-table :data="model.rows">
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 + model.pageSize * (model.pageIndex - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="公司名称" align="center"></el-table-column>
        <el-table-column prop="address" label="公司地址" align="center"></el-table-column>
        <el-table-column prop="legalPerson" label="法人代表" align="center"></el-table-column>
        <el-table-column prop="contacts" label="项目负责人" align="center"></el-table-column>
        <el-table-column prop="contactsPhone" label="联系方式" width="250" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <i
                class="el-icon-edit"
                style="font-size: 1.2rem;"
                @click="restInfo(scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <i
                class="el-icon-delete ml-3"
                style="font-size: 1.2rem;"
                @click="deleteItem(scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="model.rows.length > 0"
        class="text-right py-3 pr-5 bg-white"
        @size-change="handleSizeChange"
        @current-change="val => this.model.pageLoad(val)" :current-page.sync="model.pageIndex" :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper"
        :total="model.count"
        :pager-count="7"
      >
      </el-pagination>
    </el-main>
    <el-dialog
      :title="Boolean(ruleForm.id)? '修改作业单位' : '添加作业单位'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      @closed="clearRuleForm"
      width="700px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="测绘资质" prop="qualifications">
          <el-select v-model="ruleForm.qualifications" placeholder="请选择">
            <el-option label="甲级" value="甲级"></el-option>
            <el-option label="乙级" value="乙级"></el-option>
            <el-option label="丙级" value="丙级"></el-option>
            <el-option label="丁级" value="丁级"></el-option>
            <el-option label="无" value="无"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法人代表" prop="legalPerson">
          <el-input v-model="ruleForm.legalPerson"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxpayerId">
          <el-input v-model="ruleForm.taxpayerId"></el-input>
        </el-form-item>
        <el-form-item label="企业地址" prop="allName">
          <city-cascader
            ref="city"
            name="企业地址"
            v-model="ruleForm.allName"
            :provinceCode.sync="ruleForm.provinceId"
            :areaCode.sync="ruleForm.areaId"
            :cityCode.sync="ruleForm.cityId"
        ></city-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" prop="contacts">
          <el-input v-model="ruleForm.contacts"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactsPhone">
          <el-input v-model="ruleForm.contactsPhone"></el-input>
        </el-form-item>
        <el-form-item label="单位简介" prop="unitIntroduction">
          <el-input v-model="ruleForm.unitIntroduction" placeholder="请输入单位简介（2-200位）"
          type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="人员简介" prop="personnelIntroduction">
          <el-input v-model="ruleForm.personnelIntroduction" placeholder="请输入人员简介（2-200位）"
          type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="设备简介" prop="equipmentIntroduction">
          <el-input v-model="ruleForm.equipmentIntroduction" placeholder="请输入设备简介（2-200位）"
          type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" placeholder="请输入备注（2-200位）"
          type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="企业营业执照" prop="img">
          <file-upload
            ref="imgUpload"
            :is-display="true"
            list-type="picture-card"
            :limit="5"
            accept="image/*, .jpg, .png, .jpeg"
            v-model="ruleForm.img"
            name="photo"
            init-name="gerentouxiang.png"
          >
            <i class="el-icon-plus"></i>
          </file-upload>
      <!-- </file-upload>
          <file-upload
            ref="img-upload"
            v-model="ruleForm.img"
            accept="image/*, .jpg, .png, .jpeg"
            :is-display="true"
          >
            <el-button slot="trigger" class="width-200">选取文件</el-button>
            <p class="text-muted d-inline">选择图片 支持上传的图片类型: (.jpg .png .jpeg)</p>
          </file-upload> -->
        </el-form-item>
        <el-form-item label="其他附件">
          <file-upload
            ref="pathUpload"
            v-model="ruleForm.path"
            :multiple="true"
          > 
          <el-button slot="trigger" class="width-200">选取文件</el-button>
            <p class="text-muted d-inline">选择文件 支持上传的文件类型: (.jpg .png .rar .txt .zip .doc .ppt .xls .pdf .docx .xlsx .pptx)</p>
          </file-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="model.loading"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>
<script>
import PagedList from "../../../libs/PagedList"

export default {
  name: 'workprovince',
  title: '省作业单位',
  data() {
    const validateCity = (rule, value, callback) => {
      let arr = value.split(' ')
      for (var i = 0; i < arr.length-1; i++) {
        if (arr[i].length === 0) {
          callback(new Error('请选择省市县'))
          return
        }
      }
      callback()
    }
    const validateImg = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请上传营业执照'))
      } else {
        callback()
      }
      
    }
    return {
      model: new PagedList("survey/enterprise/getEnterprise", 20),
      originInfo: {
        id: '',
        name: '',
        head: '',
        mobile: '',
        introduce: ''
      },
      ruleForm: {
        name: '',
        qualifications: '',
        legalPerson: '',
        taxpayerId: '',
        allName: '',
        provinceId: '',
        areaId: '',
        cityCode: '',
        address: '',
        contacts: '',
        contactsPhone: '',
        img: [],
        path: [],
        unitIntroduction: '',
        personnelIntroduction: '',
        equipmentIntroduction: '',
        remark: '',
      },
      userInfo: {
        name: '',
        mobile: ''
      },
      dialogVisible: false,
      inputVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入名称名称', trigger: 'blur' }
        ],
        qualifications: [
          { required: true, message: '请选择测绘资质', trigger: 'blur' }
        ],
        legalPerson: [
          { required: true, message: '请输入法人代表', trigger: 'blur' }
        ],
        taxpayerId: [
          { required: true, message: '请输入纳税人识别号', trigger: 'blur' }
        ],
        allName: [
          { required: true, message: '请选择企业地址', trigger: 'blur' },
          { validator: validateCity, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        contacts: [
          { required: true, message: '请输入项目负责人', trigger: 'blur' }
        ],
        contactsPhone: [
          { required: true, message: '请输入固定电话号码或者手机号', trigger: 'blur' }
        ],
        unitIntroduction: [
          { required: true, message: '请输入请输入单位简介', trigger: 'blur' }
        ],
        personnelIntroduction: [
          { required: true, message: '请输入人员简介', trigger: 'blur' }
        ],
        equipmentIntroduction: [
          { required: true, message: '请输入设备简介', trigger: 'blur' }
        ],
        img: [
          { required: true, message: '请选择企业地址', trigger: 'blur' },
          { validator: validateImg, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.newSearch();
    this.getInfo()
  },
  methods: {
    newSearch() {
      this.model.search();
    },
    handleSizeChange (pageSize ) {
      this.model.pageSize = pageSize
      this.newSearch();
    },
    getInfo () {
      this.$get('survey/office/getSurveyUnitInfo').then(res => {
        this.originInfo = res.data.data
      })
    },
    restInfo (row) {
      this.ruleForm = Object.assign({}, row)
      this.$nextTick(() => {
        this.dialogVisible = true
      })
    },
    addItem () {
      this.dialogVisible = ture
    },
    // 表单添加成员
    showInput () {
      this.inputVisible = true
    },
    // 取消添加成员
    cannelAdd () {
      this.inputVisible = !this.inputVisible
      this.userInfo = {
        name: '',
        mobile: ''
      }
    },
    // 添加
    handleInputConfirm () {
      if (this.userInfo.name.length === 0) {
        this.$message({
          showClose: true,
          message: '请输入组员的姓名电话',
          type: 'warning'
        })
        return
      }
      if (!(/^1[34578]\d{9}$/.test(this.userInfo.mobile))) {
        this.$message({
          showClose: true,
          message: '电话号码不正确',
          type: 'warning'
        })
        return
      }
      this.ruleForm.surveyUserInfoList.push({
        mobile: this.userInfo.mobile, 
        name: this.userInfo.name
      })
      this.userInfo = {
        name: '',
        mobile: ''
      }
      this.inputVisible = !this.inputVisible
    },
    // 删除tag
    handleClose (tag, index) {
      this.ruleForm.surveyUserInfoList.splice(index, 1); 
    },
    submitForm () {
      // survey/office/insertOrUpdateSurveyTeamInfo
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.model.loading = true
          let url = 'survey/enterprise/addEnterprise'
          this.ruleForm.id ? url = 'survey/enterprise/updateEnterprise' : ''
          this.$post(url, this.ruleForm, {convert: false}).then(res => {
            this.$message({
              message: this.ruleForm.id ? '修改成功' : '新建成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.newSearch()
          }).finally(() => {
            this.model.loading = false
          })
        } else {
          return false;
        }
      });
    },
    deleteItem (row) {
      this.$confirm(`确认删除 ${row.name} ?`, "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$get('survey/enterprise/deleteEnterprise', {id: row.id}).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.newSearch()
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      })
      
    },
    clearRuleForm () {
      // 清空营业执照
      this.$refs.imgUpload.clearFiles()
      // 清空附件
      this.$refs.pathUpload.clearFiles()
      this.ruleForm = {
        name: '',
        qualifications: '',
        legalPerson: '',
        taxpayerId: '',
        allName: '',
        provinceId: '',
        areaId: '',
        cityCode: '',
        address: '',
        contacts: '',
        contactsPhone: '',
        img: [],
        path: [],
        unitIntroduction: '',
        personnelIntroduction: '',
        equipmentIntroduction: '',
        remark: '',
      }
      
      this.$refs.ruleForm.resetFields();
    }
  }
}
</script>
<style lang='scss'>
</style>